import React from 'react';
import { message } from 'antd';
import { connect } from 'react-redux';
import Api from 'Utils/api';
import { API_HOST } from 'Constants/config';
import CommonBorder from './../../../../DispatchPage/Components/CommonBorder';
import './index.scss';

class DetailPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      data: {},
    };
  }
  componentDidMount() {
    this.initList();
  }
  initList() {
    const api = new Api({
      method: 'GET',
      path: `/documents/${this.state.id}`,
      success: (json) => { this.setState({ data: json }); },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  render() {
    const { data } = this.state;
    return (
      <CommonBorder
        title="监管动态详情"
        content={
          <div className="dynamic-detail-body-container">
            <ul className="detail-body" >
              <li className="item">
                <div>标题：</div>
                <div>{data.title}</div>
              </li>
              <li className="item">
                <div className="textarea-left">内容：</div>
                <div className="textarea">
                  {
                    data.content ? <span dangerouslySetInnerHTML={{ __html: data.content.replace(/\n/g, '<br/>') }} /> : ''
                  }
                </div>
              </li>
              <li className="item">
                <div>图片：</div>
                <div><img src={`${API_HOST}/files/${data.media}`} alt="图片" /></div>
              </li>
            </ul >
          </div>
        }
      />
    );
  }
}


function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}

export default connect(mapStateToProps)(DetailPage);
